<template>
  <div>
    <!-- 聊天页面 -->
    <chat-1></chat-1>
    
    <div id="app">
      <!-- 悬浮按钮 -->
      <div class="floating-button" @click="toggleChat">客服</div>

      <!-- 聊天弹窗 -->
      <div v-if="isChatVisible" class="chat-dialog">
        <header class="chat-header">
          <h3>AI 客服助手</h3>
          <button class="close-btn" @click="toggleChat">×</button>
        </header>
        <div class="chat-content">
          <!-- 聊天消息展示 -->
          <div class="chat-messages">
            <div
              v-for="(message, index) in messages"
              :key="index"
              class="chat-message"
              :class="{
                'user-message': message.role === 'user',
                'ai-message': message.role === 'ai',
              }"
            >
              <span v-if="message.role === 'user'" class="message-user"
                >我：</span
              >
              <span v-if="message.role === 'ai'" class="message-ai">AI：</span>
              <span class="message-content">{{ message.content }}</span>
            </div>
          </div>

          <!-- 用户输入 -->
          <div class="chat-input">
            <input
              type="text"
              v-model="userInput"
              placeholder="请输入您的问题..."
              @keydown.enter="sendMessage"
            />
            <button @click="sendMessage">发送</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chat1 from "../components/chat1.vue";
import { websocketObj } from "../utils/websocket";
export default {
  components: { chat1 },
  data() {
    return {
      isChatVisible: false, // 控制聊天窗口是否显示
      messages: [], // 聊天记录
      userInput: "", // 用户输入内容
    };
  },
  created() {
    websocketObj.socket();
  },
  beforeDestroy() {
    websocketObj.close();
  },
  methods: {
    // 切换聊天窗口显示/隐藏
    toggleChat() {
      this.isChatVisible = !this.isChatVisible;
    },
    // 发送消息
    async sendMessage() {
      if (!this.userInput.trim()) return;

      // 添加用户消息到聊天记录
      this.messages.push({ role: "user", content: this.userInput });
      const question = this.userInput;
      this.userInput = ""; // 清空输入框

      // 模拟 AI 回复
      this.messages.push({ role: "ai", content: "AI 正在思考，请稍等..." });

      try {
        const response = await this.getAIResponse(question);
        this.messages[this.messages.length - 1].content = response;
      } catch (error) {
        this.messages[this.messages.length - 1].content =
          "AI 回复失败，请稍后再试。";
      }
    },
    // 模拟 AI 接口响应
    async getAIResponse(question) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(`这是 AI 对问题 "${question}" 的回答。`);
        }, 1000); // 模拟 1 秒延迟
      });
    },
  },
};
</script>

<style scoped>
/* 悬浮按钮样式 */
.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #ff6b6b;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s;
  z-index: 1000;
}
.floating-button:hover {
  transform: scale(1.1);
}

/* 聊天窗口 */
.chat-dialog {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 300px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 1000;
}

/* 聊天头部 */
.chat-header {
  background: #ff6b6b;
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
.chat-header h3 {
  margin: 0;
}
.close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

/* 聊天内容区 */
.chat-content {
  display: flex;
  flex-direction: column;
  height: 400px;
  padding: 10px;
  box-sizing: border-box;
}

/* 聊天记录 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 10px;
  padding-right: 10px;
}
.chat-message {
  margin-bottom: 10px;
}
.user-message {
  text-align: right;
}
.ai-message {
  text-align: left;
}
.message-content {
  display: inline-block;
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 5px 0;
}

/* 输入区 */
.chat-input {
  display: flex;
  gap: 10px;
}
.chat-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.chat-input button {
  padding: 10px 15px;
  background-color: #ff6b6b;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.chat-input button:hover {
  background-color: #ff3b3b;
}
</style>
